<template>
	<view class="nav-bar total">
		<view class="nav-bar-content" v-for="(item,index) in name" :key="index" @tap="gotodetails(index)">
			<image :src="item.icon"></image>
			<text class="nav-bar-content-title">{{item.title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: [{
						title: '本地',
						icon: 'https://via.placeholder.com/60x60.png/d7d7d6'
					},
					{
						title: '云盘',
						icon: 'https://via.placeholder.com/60x60.png/d7d7d6'
					},
					{
						title: '最近播放',
						icon: 'https://via.placeholder.com/60x60.png/d7d7d6'
					},
					{
						title: '我的好友',
						icon: 'https://via.placeholder.com/60x60.png/d7d7d6'
					},
					{
						title: '收藏和赞',
						icon: 'https://via.placeholder.com/60x60.png/d7d7d6'
					},
					{
						title: '我的电台',
						icon: 'https://via.placeholder.com/60x60.png/d7d7d6'
					},
					{
						title: '添加更多',
						icon: 'https://via.placeholder.com/60x60.png/d7d7d6'
					}
				]
			}
		},
		methods: {
			gotodetails(index) {
				
				if(index == 1){
					uni.navigateTo({
						url: '/view/CloudDisk/CloudDisk'
					})
				}
				
				if (index ==2) {
					uni.navigateTo({
						url: '/view/RecentPlays/RecentPlays'
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	// 导航条
	.nav-bar {
		display: flex;
		flex-wrap: wrap;


		&-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 25rpx 0;
			width: 25%;

			image {
				width: 60px;
				height: 60px;
			}

			&-title {
				font-size: 25rpx;
				margin-top: 13rpx;
			}
		}
	}
</style>
